<template>
    <ConfirmDialog
        :layer="props"
        @update:visible="updateDialogShow"
        @confirm="submit(formRef)" class="custom-dialog">
        <el-form
            class="edit-application-form"
            ref="formRef" 
            :model="form"
            :rules="rules"
            label-width="140px">
            <el-form-item prop="link_type" label="添加链接方式">
                <el-radio-group v-model="form.link_type" class="ml-4" @change="changeType">
                    <el-radio :label="1" size="large">添加应用</el-radio>
                    <el-radio :label="2" size="large">添加链接</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.link_type == 2" prop="link" label="链接地址">
                <el-input
                    v-model.trim="form.link"
                    placeholder="请输入链接地址">
                </el-input>
            </el-form-item>
        </el-form>
        <div class="mt30" v-if="form.link_type == 1">
            <el-table
                :data="data.tableData"
                :key="data.id"
                max-height="400"
                v-loading="data.loading"
                @row-click="selectApplication"
                style="width: 100%"
            >
                <el-table-column label="选择" width="80">
                    <template #default="scope">
                        <el-radio name="application" v-model="checked" :label="scope.row.id" @change.native="selectApplication(scope.row)"><span></span></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="appTypeName" label="应用名称" show-overflow-tooltip />
                <el-table-column prop="sourceName" label="来源" show-overflow-tooltip />
                <el-table-column prop="typeName" label="分类" show-overflow-tooltip />
            </el-table>
        </div>
        
    </ConfirmDialog>
</template>

<script setup>
import ConfirmDialog from '@/components/dialogComp.vue';
import TableWrap from '@/components/table-wrap/table-wrap.vue';
import { ref, reactive, defineProps, defineEmits, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router'
import Fn from '@/lib/fn.js';
import { validateUrl, deepCopy } from '@/lib/tools.js'

const store = useStore();
const route = useRoute()
const emit = defineEmits(['update:show', 'update:confirm']);

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '添加链接/应用'
    },
    showButton: {
        type: Boolean,
        default: true
    },
    width: {
        type: String,
        default: '900px'
    },
    isCenter: {
        type: Boolean,
        default: false 
    },
    editStatus: {
        type: String,
        default: 'add'
    },
    linkInfo: {
        type: Object,
        default: () => {
            return {
                id: Date.now(),
                name: '',
                link_type: 1,
                link: '',
                application_info: null
            }
        }
    }
})

const isEdit = computed(() => {
    return props.editStatus === 'edit'
})

const formRef = ref(null)

let initialInfo = deepCopy(props.linkInfo)

initialInfo.link_type = initialInfo.link_type || 1
const form = reactive(initialInfo)
// 校验链接地址是否正确
const checkLink = (rule, value, callback) => {
    validateUrl(rule, value, callback);
}
// 表单校验规则
const rules = {
    link_type: [{ required: true, message: '请选择链接方式', trigger: 'change'}],
    link: [{ required: true, validator: checkLink, trigger: 'change'}]
}

// 列表数据
const data = reactive({
    loading: false,
    tableData: [],
    currentNode: {}
});
const filter = reactive({
    source: '',
    category: '',
    name: ''
});
let checked = ref(false)
// 获取列表数据
function getSiteApplications () {
    store.dispatch('proxyAction', {
        name: 'getSiteApplications',
        queries: {
            institutionId: route.query.id
        }
    }).then((res) => {
        data.tableData = res.data || []
        data.tableData.forEach((item) => {
            if(form.moduleKey && item.moduleKey === form.moduleKey && form.link) {
                checked.value = item.id
                form.application_info = item
            }
        })
    })
}
const selectApplication = function(row) {
    checked.value = row.id
    form.application_info = row
}
// 更改弹窗显隐
const updateDialogShow = () => {
    emit('update:show', !props.show);
}

// 提交表单数据
const submit = (formEl) => {
    formEl.validate((valid, fields) => {
        if (valid) {
            if(form.link_type === 1 && !form.application_info) {
                store.dispatch('message', {
                    message: '请选择应用'
                })
                return;
            }
            form.moduleKey = ''
            if(form.link_type === 1) { // 应用
                form.moduleKey = form.application_info.moduleKey;
                form.link = form.application_info && form.application_info.appTypeName || '';
            }

            delete form.application_info;
            emit('update:confirm', form);
            emit('update:show', !props.show);
        } else {
            console.log('error submit!', fields)
        }
    })
}

const changeType = () => {
    form.link = '';
}
// 初始化数据
onMounted(() => {
    getSiteApplications()
})
</script>

<style lang="scss" scoped>

.edit-application-form {
    :deep(.el-radio) {
        line-height: 32px;
        height: 32px;
    }
}
.w240 {
    width: 240px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.ml20 {
    margin-left: 20px;
}
.fl {
    float: left;
}
</style>